<template>
  <view class="flex-col page">
    <view class="flex-row justify-between items-start">
      <image
        class="image"
				@click="naviBack"
        src="@/static/images/codefun/99b216e00af1cd6163d378fa9057a6f2.png"
      />
      <view class="flex-col items-center group">
        <text class="text">{{roomName}}</text>
        <text class="mt-18 font_2 text_3">{{deviceType}}</text>
      </view>
<!-- 	### -->
      <view class="flex-row items-center section" :style="styleObject" @click="switchPower">
        <text class="font text_2">{{isPowerOn==true?'On':'Off'}}</text>
        <view class="shrink-0 section_2 ml-5"></view>
      </view>
    </view>
		<view style="display: flex; justify-content: center;">
			<image :src="`/static/images/icons/status/${deviceTypeEng}-${powerStr.imgName}.png`" @click="switchPower" style="margin: 100rpx 0 0 0;"></image>
		</view>
<!--    <view class="flex-col justify-start items-center relative group_2">
      <view class="section_6"></view>
      <view class="section_5 pos_4"></view>
      <view class="flex-col justify-start items-center section_4 pos_2">
        <view class="flex-col justify-start items-center section_7">
          <view class="flex-row section_8">
            <text class="self-center text_5">24 C</text>
            <view class="self-start group_4"></view>
          </view>
        </view>
      </view>
      <view class="group_3 pos_3"></view>
      <view class="flex-row justify-end items-center section_3 pos">
        <image
          class="image_2"
          src="@/static/images/codefun/bf2089f7aa4d89eb28c623b305a5ba61.png"
        />
        <text class="ml-8 font_2 text_4">60</text>
      </view>
    </view> -->
    <view class="flex-row equal-division">
      <view class="flex-row justify-center equal-division-item section_9">
<!--        <image
          class="self-start image_3"
          src="@/static/images/codefun/5d81ae49f92cf2884ac00601edea6ec8.png"
        /> -->
        <view class="flex-col items-start self-center group_5 ml-13">
<!--          <text class="font">湿度</text> -->
          <view class="mt-10 flex-row items-center">
<!--            <text class="shrink-0 font_3 text_7">10</text>
            <text class="font text_8 ml-5">%</text> -->
          </view>
        </view>
      </view>
      <view class="ml-16 flex-row justify-center items-center equal-division-item_2 section_10">
<!--        <image
          class="image_3"
          src="@/static/images/codefun/45b9cc5ff8e6e9ce7314a759774730d9.png"
        /> -->
        <view class="flex-col items-start group_6 ml-13">
<!--          <text class="font text_6">温度</text>
          <text class="mt-12 font_3 text_9">20.3℃</text> -->
        </view>
      </view>
    </view>
<!--    <view class="flex-col section_11">
      <text class="self-start font_3 text_10">速度</text>
      <view class="flex-row self-stretch mt-13">
        <view class="flex-col justify-start items-center text-wrapper"><text class="font_4 text_11">1</text></view>
        <view class="ml-16 flex-col justify-start items-center text-wrapper_2">
          <text class="font_4 text_12">2</text>
        </view>
        <view class="ml-16 flex-col justify-start items-center text-wrapper"><text class="font_4">3</text></view>
        <view class="ml-16 flex-col justify-start items-center text-wrapper">
          <text class="font_4 text_13">4</text>
        </view>
      </view>
    </view> -->
    <view class="flex-row justify-center items-center section_12" @click="switchPower">
      <image
        class="image_4"
        src="@/static/images/codefun/08ce5fc64448b5d70450b339d157af96.png"
      />
      <text class="text_14 ml-9">{{powerStr.text}}</text>
    </view>
  </view>
</template>

<script>
	import mqtt from "mqtt";
	
	export default {
		data() {
			return {
					isPowerOn:false,
					roomType:'',
					roomName:'',
					deviceType:'',
					deviceTypeEng:'',
					powerStr:{
						imgName: '',
						text: '',
						btnColor: '#8799a3'
						// #8799a3
					},
					color:{
						off: '#8a8a8a',
						on: '#0095ff'
					},
					str:{
						off: '打开电源',
						on: '关闭电源'
					},
					img:{
						off: 'close',
						on: 'open'
					}
			};
		},
		computed: {
			styleObject() {
				return {
					'--btn-color': this.powerStr.btnColor
				};
			}
		},			
		onLoad(option){
			this.deviceType = option.type
			this.deviceTypeEng = option.typeEng
			this.roomType = option.room
			this.roomName = option.roomName
			console.log(option.type,option.room,option.typeEng)
			this.initPower()
			this.initMQTT()
		},
		onBackPress() {
			this.deInitMQTT()
			console.log(123)
		},
	
	 methods: {
			switchPower(){
				this.isPowerOn = !this.isPowerOn
				this.initPower()
				let cmd = this.powerStr.imgName
				if(this.deviceTypeEng == 'fire'){
					cmd = this.powerStr.imgName == 'open'?'fire':'outfire'
				}
				let MQTTCmd = `{"uuid":"324234234124","housename":"myhouse","roomType":"${this.roomType}","devicetype":"${this.deviceTypeEng}","devicename":"${this.deviceTypeEng}","command":"${cmd}","value":"0"}`
				this.client.publish("house", MQTTCmd); 
				console.log('go',MQTTCmd)
				/**
				 * {"uuid":"324234234124","housename":"myhouse","roomType":"a1","devicetype":"aircondition","devicename":"aircondition","command":"open","value":"0"}
				 */
				// :this.color.off
			},
			initPower(){
				let power = this.isPowerOn
				if(power==true){
					this.powerStr.btnColor = this.color.on
					this.powerStr.text = this.str.on
					this.powerStr.imgName = this.img.on
				} else {
					this.powerStr.btnColor = this.color.off
					this.powerStr.text = this.str.off
					this.powerStr.imgName = this.img.off
				}
			},
			initMQTT(){
				console.log('begin...');
				// 建立连接
				 // 注意此出的网址开头要使用ws:而不是tcp:
				 this.client = mqtt.connect("ws://120.55.114.101:8083/mqtt", {
								 clean: true,
								 connectTimeout: 8000, // 超时时间
								 reconnectPeriod: 1000, // 重连时间间隔
								username: "house01",  // 用户名字
								password: "aaaa1234",  // 密码
								clientId: "housetest"//设备ID
				 });
				 // 订阅主题
				 this.client.subscribe("houseresponse", (topic) => {
								console.log(123);  // 此处打印出订阅的主题名称
				 });
				 // 推送消息
				 this.client.publish("house", JSON.stringify({one: '1', two: '2'})); 
				
				 //接受消息
				 this.client.on("message", (topic, data) => {
								// 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
								//json标准格式：{"one": "1","two": "eeeee111"}
								console.log('getdata1:',data.toString());
								// console.log('getdata2:',JSON.parse(data.toString()));							
								let dataArr = JSON.parse(JSON.stringify(data.toString()));
								console.log('getdata3:',dataArr);
				 });
				
				 // 重连
				 this.client.on("reconnect", (error) => {
								console.log("正在重连:", error);
				 });
				
				 // 错误回调
				 this.client.on("error", (error) => {
								console.log("MQTT连接已关闭");
				 });
			},
			deInitMQTT(){
				this.client.end()
			},
			naviBack(){
				uni.navigateBack()
			}
		}
	}
</script>
	
<style scoped lang="scss">
@import url("@/css/common.css");	
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-13 {
    margin-left: 26rpx;
  }
  .mt-13 {
    margin-top: 26rpx;
  }
  .ml-9 {
    margin-left: 18rpx;
  }
  .page {
    padding: 80rpx 40rpx 50rpx;
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .image {
      box-shadow: 0rpx 10rpx 10rpx #00000012;
      border-radius: 50%;
      width: 96rpx;
      height: 96rpx;
    }
    .group {
      margin-top: 20rpx;
      .text {
        color: #273240;
        font-size: 48rpx;
        font-family: Poppins;
        font-weight: 600;
        line-height: 44.54rpx;
      }
      .text_3 {
        color: #838080;
        line-height: 29.6rpx;
      }
    }
    .section {
      margin-top: 26rpx;
      padding: 6rpx 8rpx;
			// ###
      background-color: var(--btn-color);
      border-radius: 20rpx;
      height: 44rpx;
      .text_2 {
        color: #ffffff;
        line-height: 17.36rpx;
      }
      .section_2 {
        background-color: #f7f7f7;
        border-radius: 50%;
        width: 32rpx;
        height: 32rpx;
      }
    }
    .group_2 {
      margin-top: 100rpx;
      padding: 128rpx 0 136rpx;
      .section_6 {
        background-color: #0095ff;
        filter: blur(400rpx);
        border-radius: 50%;
        width: 316rpx;
        height: 316rpx;
      }
      .section_5 {
        background-color: #0095ff21;
        border-radius: 50%;
        width: 340rpx;
        height: 340rpx;
      }
      .pos_4 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .section_4 {
        padding: 96rpx 0;
        border-radius: 50%;
        background-image: url('@/static/images/codefun/cf7a245e494ebd4705242277260c51d0.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 474rpx;
        .section_7 {
          padding: 22rpx 0;
          background-color: #0095ff36;
          border-radius: 50%;
          width: 284rpx;
          .section_8 {
            padding: 88rpx 48rpx 80rpx;
            background-color: #0095ff;
            border-radius: 50%;
            .text_5 {
              color: #ffffff;
              font-size: 60rpx;
              font-family: Poppins;
              font-weight: 600;
              line-height: 72rpx;
              width: 70rpx;
            }
            .group_4 {
              margin-right: 68rpx;
              margin-top: 4rpx;
              border-radius: 50%;
              width: 12rpx;
              height: 12rpx;
              border-left: solid 2rpx #ffffff;
              border-right: solid 2rpx #ffffff;
              border-top: solid 2rpx #ffffff;
              border-bottom: solid 2rpx #ffffff;
            }
          }
        }
      }
      .pos_2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .group_3 {
        border-radius: 50%;
        width: 12rpx;
        height: 12rpx;
        border-left: solid 2rpx #273240;
        border-right: solid 2rpx #273240;
        border-top: solid 2rpx #273240;
        border-bottom: solid 2rpx #273240;
      }
      .pos_3 {
        position: absolute;
        right: 86rpx;
        top: 102.04rpx;
      }
      .section_3 {
        padding: 96rpx 54rpx 432rpx;
        border-radius: 50%;
        background-image: url('@/static/images/codefun/a8e2da15d2063e71473a7d00a79baba4.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .image_2 {
          border-radius: 50%;
          width: 50rpx;
          height: 50rpx;
        }
        .text_4 {
          color: #273240;
          line-height: 23.48rpx;
        }
      }
      .pos {
        position: absolute;
        left: 45.98rpx;
        right: 44.02rpx;
        top: 0;
      }
    }
    .font_2 {
      font-size: 32rpx;
      font-family: Poppins;
    }
    .equal-division {
      margin: 68rpx 8rpx 0;
      .equal-division-item {
        position: relative;
        flex: 1 1 312rpx;
        .group_5 {
          width: 159.04rpx;
          .text_7 {
            line-height: 34rpx;
          }
          .text_8 {
            line-height: 28rpx;
          }
        }
      }
      .section_9 {
        padding: 32rpx 32rpx 20rpx;
        // background-color: #00000000;
        // border-radius: 20rpx;
        // box-shadow: 0rpx 8rpx 80rpx #00000014;
        height: 18rpx;
      }
      .equal-division-item_2 {
        flex: 1 1 312rpx;
        .group_6 {
          width: 159.08rpx;
          .text_6 {
            line-height: 22.2rpx;
          }
          .text_9 {
            line-height: 20.58rpx;
          }
        }
      }
      .section_10 {
        padding: 32rpx;
        // background-color: #00000000;
        // border-radius: 20rpx;
        // box-shadow: 0rpx 8rpx 80rpx #00000014;
        height: 18rpx;
      }
      .image_3 {
        border-radius: 50%;
        width: 64rpx;
        height: 64rpx;
      }
    }
    .font {
      font-size: 24rpx;
      font-family: Poppins;
      line-height: 20.96rpx;
      color: #838080;
    }
    .section_11 {
      margin: 64rpx 8rpx 0;
      padding: 44rpx 40rpx 30rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 8rpx 80rpx #00000014;
      .text_10 {
        line-height: 26.16rpx;
      }
      .text-wrapper {
        padding: 24rpx 0;
        border-radius: 10rpx;
        width: 72rpx;
        height: 72rpx;
        border-left: solid 2rpx #f7f7f7;
        border-right: solid 2rpx #f7f7f7;
        border-top: solid 2rpx #f7f7f7;
        border-bottom: solid 2rpx #f7f7f7;
        .text_11 {
          line-height: 25.42rpx;
        }
        .text_13 {
          line-height: 25.64rpx;
        }
      }
      .text-wrapper_2 {
        padding: 24rpx 0;
        background-color: #0095ff;
        border-radius: 10rpx;
        width: 72rpx;
        height: 72rpx;
        .text_12 {
          color: #ffffff;
          line-height: 25.7rpx;
        }
      }
      .font_4 {
        font-size: 36rpx;
        font-family: Poppins;
        line-height: 26.46rpx;
        color: #838080;
      }
    }
    .font_3 {
      font-size: 28rpx;
      font-family: Poppins;
      color: #273240;
    }
    .section_12 {
      margin-top: 92rpx;
      padding: 40rpx 0;
      background-color: #0e1c2e;
      border-radius: 20rpx;
      .image_4 {
        width: 48rpx;
        height: 48rpx;
      }
      .text_14 {
        color: #ffffff;
        font-size: 36rpx;
        font-family: Poppins;
        line-height: 33.34rpx;
      }
    }
  }
</style>